<template>
  <div class="box">
    <button @click="shuffle">shuffle</button>

    <div class="in_box">
      <transition-group tag="div" name="list" class="cell">
        <div v-for="item in list" :key="item.id" class="lie" @click="shuffle">
          {{ item.num }}
        </div>
        <!-- <div class="lie" v-for="(item, i) in list" :key="i">
          <div class="hang" v-for="(jtem, j) in item" :key="j">
            {{ jtem }}
          </div>
        </div> -->
      </transition-group>
    </div>
  </div>
</template>

<script>
import { shuffleList } from "@/utils";
export default {
  data() {
    return {
      list: Array.apply(null, { length: 81 }).map((v, i) => {
        return { id: i, num: i + 1 };
      })
    };
  },
  created() {},
  methods: {
    shuffle() {
      this.list = shuffleList(this.list);
    }
  }
};
</script>

<style scoped>
.list-enter,
.list-leave-to {
  transform: translateY(10px);
}

/* .list-enter-active, */
.list-leave-active {
  position: absolute;
  /* transition: all 0.3s ease-in; */
}
.in_box {
  display: flex;
}
.cell {
  display: grid;
  grid-template-rows: repeat(9, 40px);
  grid-template-columns: repeat(9, 40px);
}
.lie {
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;

  /* margin-right: -1px;
  margin-bottom: -1px; */
}

/* .lie:nth-child(3n) {
  margin-right: 0;
}
.lie:nth-child(27n) {
  margin-bottom: 0;
} */
/*.lie {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

 .hang {
  width: 40px;
  height: 40px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
  transition: all 0.3s ease-in;
}

/* .lie:nth-child(odd) .hang:nth-child(even) {
  background: red;
} */

.lie:nth-child(even) {
  background: red;
  border: none;
  color: #fff;
  box-shadow: 0 0 4px #000;
  /* animation: colorRun 20s infinite; */
}

.list-move {
  transition: transform 1s;
}

@keyframes colorRun {
  0%,
  100% {
    box-shadow: 0 0 20px hsla(0, 41%, 47%, 1);
  }
  10% {
    box-shadow: 0 0 20px hsla(0, 31%, 60%, 1);
  }
  20% {
    box-shadow: 0 0 20px hsla(152, 76%, 73%, 1);
  }
  30% {
    box-shadow: 0 0 20px hsla(0, 100%, 74%, 1);
  }
  40% {
    box-shadow: 0 0 20px hsla(71, 97%, 73%, 1);
  }
  50% {
    box-shadow: 0 0 20px hsla(0, 100%, 54%, 1);
  }
  60% {
    box-shadow: 0 0 20px hsla(283, 82%, 45%, 1);
  }
  70% {
    box-shadow: 0 0 20px hsla(0, 81%, 61%, 1);
  }
  80% {
    box-shadow: 0 0 20px hsla(320, 80%, 52%, 1);
  }
  90% {
    box-shadow: 0 0 20px hsla(115, 91%, 57%, 0.418);
  }
}
</style>
